<template>
  <div class="total">
    <el-card v-if="isLoading" class="loading-card">
      <el-spinner class="loading-icon" size="large"></el-spinner>
      <p class="loading-text">加载公司信息中...</p>
    </el-card>

    <!-- 信息展示 -->
    <el-card v-else shadow="always">
      <div class="avatar-section">
        <img
          v-if="userInfo.companyAvatar"
          :src="userInfo.companyAvatar + '?t=' + Date.now()"
          class="company-avatar"
          alt="公司头像"
        />
        <div v-else class="avatar-placeholder">
          <i class="el-icon-plus"></i>
          <p>暂无公司头像</p>
        </div>
      </div>

      <div class="info-list">
        <el-row class="info-item">
          <el-col span="6" class="info-label">公司名称：</el-col>
          <el-col span="18">
            {{ userInfo.companyName || "未填写" }}
          </el-col>
        </el-row>

        <el-row class="info-item">
          <el-col span="6" class="info-label">创建日期：</el-col>
          <el-col span="18">
            {{ formatDate(userInfo.createDate) || "未填写" }}
          </el-col>
        </el-row>

        <el-row class="info-item">
          <el-col span="6" class="info-label">公司行业：</el-col>
          <el-col span="18">
            {{ userInfo.companyIndustry || "未填写" }}
          </el-col>
        </el-row>

        <el-row class="info-item">
          <el-col span="6" class="info-label">公司地址：</el-col>
          <el-col span="18">
            {{ userInfo.location || "未填写" }}
          </el-col>
        </el-row>

        <el-row class="info-item">
          <el-col span="6" class="info-label">工作时间类型：</el-col>
          <el-col span="18">
            {{ workTimeTypeLabel || "未选择" }}
          </el-col>
        </el-row>

        <el-row class="info-item">
          <el-col span="6" class="info-label">工作日时间：</el-col>
          <el-col span="18">
            {{ userInfo.workDayStartTime.split("T")[1] || "未开始" }}
            -
            {{ userInfo.workDayEndTime.split("T")[1] || "未结束" }}
          </el-col>
        </el-row>

        <el-row class="info-item">
          <el-col span="6" class="info-label">公司介绍：</el-col>
          <el-col span="18">
            <p v-if="userInfo.companyIntroduction">
              {{ userInfo.companyIntroduction }}
            </p>
            <p v-else>暂无公司介绍</p>
          </el-col>
        </el-row>
      </div>

      <!-- 修改按钮 -->
      <div class="action-btn">
        <el-button type="primary" @click="goToEditPage">
          <i class="el-icon-edit"></i> 修改公司信息
        </el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getRectuiterBasicInfo } from "@/api/login";

export default {
  data() {
    return {
      isLoading: true,
    };
  },
  computed: {
    userInfo() {
      return this.$store.state.recruiter.userInfo || {};
    },
    workTimeTypeLabel() {
      const options = [
        { value: "SINGLE_REST", label: "单休" },
        { value: "DOUBLE_REST", label: "双休" },
        { value: "FLEXIBLE", label: "弹性工作制" },
      ];
      return (
        options.find((item) => item.value === this.userInfo.workTimeType)
          ?.label || "未选择"
      );
    },
  },
  created() {
    this.loadData();
  },
  // 监听 userInfo 变化，更新加载状态
  watch: {
    userInfo(newVal) {
      if (newVal && Object.keys(newVal).length > 0) {
        this.isLoading = false;
      }
    },
  },
  // 组件挂载时初始判断
  mounted() {
    if (Object.keys(this.userInfo).length > 0) {
      this.isLoading = false;
    }
  },
  methods: {
    async loadData() {
      let res = await getRectuiterBasicInfo();
      this.$store.commit("recruiter/SET_USER_INFO", res.data.data);
    },
    goToEditPage() {
      this.$router.push({
        name: "edit-company-message",
      });
    },
    // 日期格式化
    formatDate(dateStr) {
      if (!dateStr) return "";
      return new Date(dateStr).toLocaleDateString("zh-CN", {
        year: "numeric",
        month: "2-digit",
        day: "2-digit",
      });
    },

    isEmpty(obj) {
      return !obj.companyName && Object.keys(obj).length === 0;
    },
  },
};
</script>

<style scoped>
.total {
  padding: 20px;
}
.loading-card,
.empty-card {
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 20px;
  text-align: center;
  background-color: #fff;
}

.loading-icon {
  margin-bottom: 20px;
  color: #409eff;
}

.loading-text {
  font-size: 16px;
  color: #606266;
}

.empty-card {
  color: #909399;
}

.empty-card a {
  color: #409eff;
  text-decoration: underline;
  cursor: pointer;
}

.avatar-section {
  text-align: center;
  margin-bottom: 32px;
  margin: 0, auto;
}

.company-avatar {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.avatar-placeholder {
  width: 200px;
  height: 200px;
  border: 2px dashed #e0e2e6;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #909399;
  font-size: 14px;
}

.avatar-placeholder i {
  font-size: 64px;
  margin-bottom: 16px;
}

.info-list {
  line-height: 2.2;
  font-size: 16px;
  color: #303133;
}

.info-label {
  font-weight: 500;
  color: #606266;
  text-align: right;
  min-width: 120px;
}

.action-btn {
  margin-top: 48px;
  text-align: center;
}

.el-button--primary {
  padding: 14px 50px;
  font-size: 16px;
}
</style>